<template>
  <div>
    <home-head/>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="wrap">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="banner in banners" :key="banner.id">
            <img :src="banner.picUrl" alt="">
          </van-swipe-item>
        </van-swipe>
        <!-- /轮播 -->
        <!-- 宫格导航 -->
        <van-grid clickable column-num="3">
          <van-grid-item
            v-for="cate in cates"
            :key="cate.id"
            :to="{
              path: '/itemLists',
              query: {
                cateId: cate.id
              }
            }"
            :icon="cate.icon"
            :text="cate.name" />
        </van-grid>
        <!-- /宫格导航 -->
        <!-- 推荐商品 -->
        <van-list
          v-model="loading"
          :finished="finished"
          :offset="50"
          finished-text="我也是有底线的"
          @load="reachBottom"
        >
          <item-lists :items="items" @clickItemIcon="addCart" @clickItem="enterDetail"/>
        </van-list>
        <!-- /推荐商品 -->
      </div>
    </van-pull-refresh>
    <my-tabbar/>
  </div>
</template>

<script>
import MyTabbar from '../../components/MyTabbar.vue'
import HomeHead from './components/HomeHead.vue'
import ItemLists from './components/ItemLists.vue'
import { fetchHomeBanner, fetchCates, fetchItems, addCart } from '_api'
import { getToken } from '_utils'
export default {
  name: 'Home',
  data () {
    return {
      cates: [],
      banners: [],
      items: [], // 推荐商品数据
      page: 1,
      pageSize: 5,
      loading: false,
      /*
        loading代表 是否触发 上拉触底状态 true代表处于上拉触底
        load 是否上拉触底 触发时loading自动变成true,
        下面文本自动变成加载中状态
        loading为true不会再次触发 load事件，当请求下一页数据完成后，自动将loading变成
        false,再次下拉 才能再次触发 load事件
      */
      finished: false,
      /*
        是否已经到达最后一页，当变成true时（手动判断 请求接口返回的code,手动变成true）
        当为true 不会再触发load事件，最下面文本会变成 定义文本 不再loading文本
      */
      isLoading: false
      /*
      是否处于下拉刷新的状态当用户下拉时，自动触发 refresh
      下拉刷新事件 当这个事件触发时isLoading会自动变成true
      变成true 页面会处于下拉的动作，请求数据 刷新数据，如果为true页面会一直
      处于下拉的状态，必须手动变成false后，才能上去
      */
    }
  },
  created () {
    this.fetchBanners()
    this.fetchCates()
  },
  methods: {
    addCart (id) {
      // 加入购物车
      addCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.$toast.success('加入购物车成功')
          this.$store.commit('cart/init_cart_info', {
            items: res.data.data.items,
            buyNumber: res.data.data.number
          })
        }
      })
    },
    enterDetail (id) {
      // 跳转到详情
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    onRefresh () {
      // 遇到上拉加载 初始化
      // 将数据清空
      this.items = []
      // 回到第一页
      this.page = 1
      // 将上拉加载到达底部状态变成false
      this.finished = false
      // 用户下拉刷新了
      // 重新请求列表接口函数 成功之后 将isLoading变成false 页面上去
      this.fetchItems()
      this.page++
    },
    reachBottom () {
      // 上拉触底事件的 事件函数
      this.fetchItems()
      // 将page+1 请求下一页数据
      this.page++
    },
    fetchItems () {
      // 请求首页推荐商品
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // 此次触底 请求完成 将loading变成false 才能触发下次触底事件
        this.loading = false
        this.isLoading = false
        if (res.data.code === 0) {
          this.items = [
            ...this.items,
            ...res.data.data.result
          ]
        }
        if (res.data.code === 700) {
          // 已经到达最后一页 已经没有数据了
          this.finished = true
        }
      })
    },
    fetchCates () {
      // 获取首页宫格导航分类数据
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    fetchBanners () {
      // 获取轮播数据
      fetchHomeBanner().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    }
  },
  components: { MyTabbar, HomeHead, ItemLists }
}

</script>

<style lang="scss" scoped>
.wrap{
  padding-top:46px;
  padding-bottom: 50px;
  .my-swipe{
    width: 10rem;
    height: 5rem;
    img{
      width: 100%;
    }
  }
}
</style>
